<template>
  <div>
    <div class="search">
      <input class="search-input" type="text" 
            v-model="keyword" placeholder="请输入城市名">
    </div>
    <div class="search-content" ref="search" v-show="keyword">
      <ul>
        <li class="search-item border-bottom" 
            v-for="item in list" :key="item.id"
            @click="handleCityClick(item.name)">
          {{item.name}}
        </li>
        <li class="search-item " v-show="hasNoData">没有找到匹配的城市</li>
      </ul>
    </div>
  </div>
  
</template>

<script>
//导入城市名称滚动插件
import BScroll from 'better-scroll'
//导入计算属性以返回 Vuex store 中的状态的API和组件方法提交API
import {mapState,mapMutations} from 'vuex'

export default {
  data(){
    return{
      keyword:'',//存储搜索框输入的内容
      list:[],//存储搜索框里传递过来的符合城市列表的城市
      timer:null,
    }
  },
  props:{
    cities:Object,
  },
  computed:{
    hasNoData(){
      return !this.list.length
    }
  },
  methods:{
     handleCityClick(city){//点击时分发被点击的热门城市
      //this.$store.dispatch('changeCity',city)
      //this.$store.commit('getChangeCity',city)
      this.getChangeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['getChangeCity'])
  },
  mounted(){
    this.scroll=new BScroll(this.$refs.search)
  },
  watch:{
    keyword(){//输入搜索框中的内容与list中的城市名进行匹配
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list=[]
        return
      }
      this.timer=setTimeout(()=>{
        const result=[]
        for(let i in this.cities){
          this.cities[i].forEach((value)=>{
            if (value.spell.indexOf(this.keyword)>-1||
                value.name.indexOf(this.keyword)>-1) {
              result.push(value)
            }
          })
        }
        this.list=result
      },100)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height :0.72rem;
    padding :0.1rem;
    background-color :$bgColor;
    .search-input
      box-sizing:border-box;
      width :100%;
      height :0.62rem;
      padding :0 0.1rem;
      line-height :0.62rem;
      text-align :center;
      border-radius:0.06rem;
      color:#666;
  .search-content
    z-index :1;
    overflow :hidden;
    position:absolute;
    top:1.68rem;
    left:0;
    right:0;
    bottom:0;
    background-color :#eee;
    .search-item
      line-height :0.62rem;
      padding-left:0.2rem;
      color:#666;
      background-color :#fff;
</style>
